<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>商品列表 —学子商城</title>
	<link rel="icon" href="./img/favicon.ico">
	<link rel="stylesheet" href="./css/normalize.css">
	<link rel="stylesheet" href="./css/product.css">
</head>
<body>
	<!-- 头部 -->
	<div class="header">
		<!-- f1 搜索框和logo -->
		<div class="f1">
			<div class="container">
				<!-- logo和搜索框 -->
				<div class="flex align-items-center">
					<!-- logo -->
					<a href="./index.html" class="logo display-block pe-30">
						<span></span>
					</a>
					<!-- 搜索框 -->
					<div class="search flex align-items-center">
						<input type="text" placeholder="请输入您要搜索的内容">
						<a href="./products.html" class="searchicon">
							<!-- 放大镜图标 -->
							<div></div>
						</a>
						<!-- 分类搜索 -->
						<div class="searchText flex align-items-center">
							<div>分类搜索</div>
							<div></div>
						</div>
					</div>
				</div>
				<!-- 用户导航条 -->
				<div class="userlist">
					<ul class="flex align-items-center">
						<li class="flex align-items-center">
							<a href="#" class="heart">
								<div></div>
							</a>
						</li>
						<li class="flex align-items-center">
							<a href="#" class="list">
								<div></div>
							</a>
						</li>
						<li class="flex align-items-center">
							<a href="#" class="cart">
								<div></div>
							</a>
						</li>
						<li class="flex align-items-center"><a href="./register.html">注册</a></li>
						<li class="flex align-items-center"><a href="./login.html">登录</a></li>
					</ul>
				</div>
			</div>
		</div>
		<!-- f2 导航条 -->
		<div class="f2">
			<div class="container">
				<ul class="nav flex">
					<li><a href="./index.html">首页</a></li>
					<li><a href="./products.html">学习用品</a></li>
					<li><a href="#">私人订制</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- 内容 -->
	<div class="article">
		<!-- f3 轮播广告 -->
		<div class="f3">
			<div class="container">
				<div class="carousel">
					<div class="carousel-item">
						<img src="./img/index_guild.png">
					</div>
				</div>
			</div>
		</div>
		<!-- f4 商品列表 -->
		<div class="f4">
			<div class="container flex">
				<!-- 商品列表 -->
				<div class="productList">
					<!-- 商品列表的标题 -->
					<div class="title user-select-none">笔记本电脑</div>
					<!-- 商品列表的数据 -->
					<div class="plist flex">
						<!-- 此处是商品的数据 -->
					</div>
					<!-- 分页条 -->
					<div class="pager flex">
						<ul class="navPager user-select-none cursor-pointer flex">
							<li class="default ">上一页</a></li>
							<li class="active">1</a></li>
							<li >2</li>
							<li >3</li>
							<li >4</li>
							<li >5</li>
							<li>下一页</li>
						</ul>
					</div>
				</div>
				<!-- 商家公告 -->
				<div class="gonggao">
					<!-- 标题 -->
					<div class="title flex user-select-none">
						<img src="./img/foodstore_icon2.png">
						<div>商家公告</div>
					</div>
					<!-- 内容 -->
					<div class="main">
						<p>本店推出全网最低价套餐，保证比其他平台的价格要低！</p>
						<p>不要葱、姜、蒜等这些忌口暂时无法坐不了，敬请谅解！</p>
						<p>晚上10点以后订餐需另加送餐费2元！谢谢合作！</p>
					</div>
					<!-- 购物车 -->
					<div class="shopcart">
						<!-- 标题行 -->
						<div class="row1 flex justify-space-between">
							<div class="col">购物车</div>
							<div class="col">
								<a href="#">清空</a>
							</div>
						</div>
						<!-- 购物车内容 -->
						<div class="row2">
							<div class="rows">1.Leoveo 笔记本</div>
							<div class="rows">2.Apple Mac</div>
						</div>
						<!-- 结算金额和去结算按钮 -->
						<div class="row3 flex user-select-none">
							<div class="col1 flex align-items-center justify-content-center">
								<img src="./img/foodstore_car_2.png">￥4699.00
							</div>
							<div class="col2 text-center">去结算</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 尾部 -->
	<div class="footer">
		<!-- f5 功能菜单 -->
		<div class="f5">
			<div class="container">
				<ul class="menu flex user-select-none">
					<li>
						<!-- 图标1 -->
						<div class="icon1 flex justify-content-center">
							<span></span>
						</div>
						<div class="text-center">品质保障</div>
					</li>
					<li>
						<!-- 图标2 -->
						<div class="icon2 flex justify-content-center">
							<span></span>
						</div>
						<div class="text-center">私人订制</div>
					</li>
					<li>
						<!-- 图标3 -->
						<div class="icon3 flex justify-content-center">
							<span></span>
						</div>
						<div class="text-center">学员特供</div>
					</li>
					<li>
						<!-- 图标4 -->
						<div class="icon4 flex justify-content-center">
							<span></span>
						</div>
						<div class="text-center">专属特权</div>
					</li>
				</ul>
			</div>
		</div>
		<!-- f6 底部菜单和列表 -->
		<div class="f6">
			<div class="container flex align-item-start">
				<!-- 底部logo和文字 -->
				<div>
						<!-- logo -->
						<a href="#" class="logo display-block">
							<span></span>
						</a>
						<div class="footFonts mt-5">
							<span></span>
						</div>
				</div>
				<!-- 底部功能列表 -->
				<div class="FootList user-select-none">
					<!-- 列表标题 -->
					<div>
						<ul class="flex">
							<li>买家帮助</li>
							<li>商家帮助</li>
							<li>关于我们</li>
						</ul>
					</div>
					<!-- 列表的内容 -->
					<div class="flex justify-space-between">
						<ul>
							<li><a href="#">新手指南</a></li>
							<li><a href="#">服务保障</a></li>
							<li><a href="#">常见问题</a></li>
						</ul>
						<ul>
							<li><a href="#">商家入驻</a></li>
							<li><a href="#">商家后台</a></li>
						</ul>
						<ul>
							<li><a href="#">关于达内</a></li>
							<li><a href="#">联系我们</a></li>
							<li class="flex">
								<div class="wechat"></div>
								<div class="sinablog"></div>
							</li>
						</ul>
					</div>
				</div>
				<!-- 客户端 -->
				<div class="flex align-item-start">
					<div>
						<div class="text-center user-select-none pb-10">学子商城客户端</div>
						<!-- 图标 -->
						<div class="android"></div>
						<!-- 图标 -->
						<div class="ios"></div>
					</div>
					<!-- 二维码 -->
					<div class="erweima"></div>
				</div>
			</div>
		</div>
		<!-- f7 版权说明 -->
		<div class="f7 user-select-none">
			<div class="container text-center">
				&copy;2017&nbsp;达内科技有限公司&nbsp;版权所有&nbsp;京ICP备08000853号-75
			</div>
		</div>
	</div>
</body>
<script>
	// 商品列表数据
	window.onload= ()=> {
		const xhr = new XMLHttpRequest
		xhr.open('GET','/v2/products/list/1/9')
		xhr.onload = () => {
			const data = JSON.parse(xhr.responseText).data
			const html = data.map(value => {
				const {title,price} = value
				return `
				<!-- 一条商品 -->
				<div class="laptopCard">	
					<!-- 商品的图片 -->
					<div class="pimg">
						<img src="./img/computer2.jpg" class="img-fluid">
					</div>
					<!-- 商品的介绍 -->
					<div class="product">
						<div class="pprice">￥${price}.00</div>
						<div class="ptitle" title="${title}">${title}</div>
						<div class="flex align-items-center">
							<div class="input-group flex align-items-center">
								<div class="jian user-select-none">-</div>
									<input type="text" value="1" class="input-control">
									<div class="jia user-select-none">+</div>
								</div>
							<div class="cartadd user-select-none">加入购物车</div>
						</div>
					</div>
				</div>
				`
			})
			const plist =document.querySelector('.plist')
			plist.innerHTML = html.join('')
			const ptitles = document.querySelectorAll('.ptitle')
			ptitles.forEach(value => 
				value.onclick = function() {
					location.href='./detail.html'
				}
			)
			// 商品卡的功能
			const jias = document.querySelectorAll('.jia')
			const jians = document.querySelectorAll('.jian')
			const cartadds = document.querySelectorAll('.cartadd')
			jias.forEach(value =>
				value.onclick = function() {
					const input = this.previousElementSibling
					if(input.value < 0) {
						input.value = 1
						return
					}
					input.value++
				}
			)
			jians.forEach(value => 
				value.onclick = function() {
					const input = this.nextElementSibling
					input.value--
					if(input.value <= 0) {
						input.value = 1
					}
				}
			)
			//  加入购物车按钮添加单击事件
			cartadds.forEach(value => 
				value.onclick = function() {
					alert('成功将商品添加到购物车中')
				}
			)
				}
		xhr.send()
	}
	// 分页条
	let pager = document.querySelector('.navPager')
	// li的数组
	let pager_items = pager.children
	// 上一页
	// 下一页
	const page_up = pager.children[0]
	const page_down = pager.lastElementChild
	for(let key in pager_items) {
		// li下的a元素
		pager_items[key].onclick = function(){
			// 选择之前存在有class=active的元素移除样式
			let active = pager.getElementsByClassName('active')[0]
			active.classList.remove('active')
				this.classList.add('active')
				if(this.innerHTML == 1){
					page_up.classList.add('defult')
				}else {
					page_up.classList.remove('defult')
				}
				if(this.innerHTML == 5){
					page_down.classList.add('defult')
				}else{
					page_down.classList.remove('defult')
				}
				if(this.innerHTML >= 1 && this.innerHTML <=5){
					let xhr = new XMLHttpRequest()
					xhr.open('GET',`/v2/products/list/${this.innerHTML}/9`)
					xhr.onload = () => {
						const data = JSON.parse(xhr.responseText).data
						const html = data.map(value => {
						const {title,price} = value
						return `
						<!-- 一条商品 -->
						<div class="laptopCard">	
							<!-- 商品的图片 -->
							<div class="pimg">
								<img src="./img/computer2.jpg" class="img-fluid">
							</div>
							<!-- 商品的介绍 -->
							<div class="product">
								<div class="pprice">￥${price}.00</div>
								<div class="ptitle" title="${title}">${title}</div>
								<div class="flex align-items-center">
									<div class="input-group flex align-items-center">
										<div class="jian user-select-none">-</div>
											<input type="text" value="1" class="input-control">
											<div class="jia user-select-none">+</div>
										</div>
									<div class="cartadd user-select-none">加入购物车</div>
								</div>
							</div>
						</div>
						`
					})
						const plist =document.querySelector('.plist')
						plist.innerHTML = html.join('')
					}
					xhr.send()
				}
		}
	}

</script>
</html>